<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { get } from "../../request";
import { useServerStore } from "../../store/server";
const store = useServerStore();
import hdialog from "../r-dialog.vue";
import { onMounted, ref } from "vue";
const bntlist = [{ id: 1, name: "我需跟进" },{id:2,name:"已成交"},{id:3,name:"已关闭"},{id:4,name:"我所有销售机会"}];
const oneid = ref(1);
const itemid = (id: number) => {
  oneid.value = id;
};
const tableDataone = ref([]);
const filterTable = ref([]);
const emit = defineEmits(["onshow"]);
const gettables = async () => {
  let res = await get("/client/getsers");
  tableDataone.value=res.data
  filterTable.value=res.data
};
onMounted(() => {
  gettables();
});

const sel = ref(false);
const show = (items) => {
  shows.value=true;
  store.showmong(items);
};

interface tableData {
  base_name: String; //申请人
  base_deptname: String; //申请人部门
  sericnum: String; //单号
  sustid: String; //客户
  name: String; //客户名称
  aoolydt: String; //所属人
  money: String; //金额
  adddt: String; //日期
  createname: String; //创建人
  optname: String; //销售人
  state: String; //状态
  explain: String; //备注
  lie: String; //操作列
}
const list = ref([
  { id: 1, type: "base_name", flag: false, name: "申请人" },
  { id: 2, type: "base_deptname", flag: false, name: "申请人部门" },
  { id: 3, type: "sericnum", flag: false, name: "单号" },
  { id: 3, type: "sustid", flag: false, name: "客户" },
  { id: 4, type: "name", flag: true, name: "客户名称" },
  { id: 5, type: "aoolydt", flag: true, name: "所属人" },
  { id: 6, type: "money", flag: true, name: "金额" },
  { id: 6, type: "adddt", flag: true, name: "日期" },
  { id: 7, type: "createname", flag: true, name: "创建人" },
  { id: 7, type: "optname", flag: true, name: "销售人" },
  { id: 7, type: "explain", flag: true, name: "备注" },
  { id: 8, type: "lie", flag: false, name: "操作列" },
]);
const newlist = ref([]);
const seleed = () => {
  sel.value=false;
  newlist.value = list.value.filter((item) => item.flag);
};

onMounted(() => {
  seleed();
});

const inp = ref("");
console.log(inp.value);
const handeltable = () => {
  filterTable.value = gettable();
};
const gettable = () => {
  if (inp.value === "") {
    console.log(inp.value);
    return (tableDataone.value = tableDataone.value);
  } else {
    console.log(inp.value);
    return tableDataone.value.filter((item) => {
      item.name.includes(inp.value) ||
        item.laiyuan?.includes(inp.value) ||
        item.address?.includes(inp.value) ||
        item.linkname?.includes(inp.value) ||
        item.mobile?.includes(inp.value) ||
        item.tel?.includes(inp.value);
    });
  }
};
const shows = ref(false);
const showlist = (row) => {
  var popup = window.open(
    "https://example.com",
    "newWindow",
    "width=800,height=400"
  );
  store.showload(row);

  popup.document.write(`
    <html>
      <head>
        <style>
        .name div {
          border: 1px solid black;
          }
        .namsex {
          width: 800px;
          margin: 0 auto;
        }
        .namsex div{
          height: 50px;
          line-height: 50px;
        }
        .h1{
          font-size: 20px;
          text-align: center;
          margin-bottom: 20px;
        }
        body{
          overflow:hidden;
        }
        </style>
        <title>${row.name}</title>
      </head>
      <body>
        <div class="name">
        <h1 class="h1">客户管理</h1>
        <div class="namsex">
          <div style="display: flex">
            <div style="width: 10%">客户名称</div>
            <div style="width: 90%">${store.data.name}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">申请人</div>
            <div style="width: 90%">${store.data.base_name}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">客户类型</div>
            <div style="width: 90%">${store.data.type}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">来源</div>
            <div style="width: 90%">${store.data.laiyuan}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系电话</div>
            <div style="width: 90%">${store.data.tel}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在市</div>
            <div style="width: 90%">${store.data.shi}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在省</div>
            <div style="width: 90%">${store.data.sheng}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">地址</div>
            <div style="width: 90%">${store.data.address}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">交通路线</div>
            <div style="width: 90%">${store.data.routeline}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">状态</div>
            <div style="width: 90%">${store.data.status}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">是否标星</div>
            <div style="width: 90%">${store.data.isstat}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">供应商</div>
            <div style="width: 90%">${store.data.isgys}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系人</div>
            <div style="width: 90%">${store.data.linkname}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">说明</div>
            <div style="width: 90%">${store.data.explain}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">合同数</div>
            <div style="width: 90%">${store.data.htshu}</div>
          </div>
        </div>
      </div>
      </body>
    </html>
  `);
};
const update = ref(false);
const edit = (row) => {
  update.value=true;
  store.showmong(row);
};
const edits = () => {
  store.edits();
  update.value=false;
};

const add = ref();
const adds = () => {
  add.value.open();
};
const addclose=()=>{
  store.addmong();
  add.value.close()
}
const updateclose=()=>{
  store.editmong();
  update.value=false
}
const value = ref("");
const values = ref("");
</script>

<template>
  <div>
    <!-- 详情 -->
    <hdialog v-model="update" :width="`800px`" class="name">
      <h1 class="h1">客户管理</h1>
      <div class="namsexx">
        <div style="display: flex;">
          <div>客户</div>
          <div style="display: flex;margin-top: 10px">
            <input v-model="store.mong.name" style="background: #f1f1f1" type="text" /><el-button
              >选择</el-button
            >
          </div>
          <div>状态</div>
          <div>
            <el-select
              v-model="store.mong.state"
              placeholder="Select"
              size="large"
              style="width: 240px"
            >
              <el-option value="--请选择--" key="--请选择--" label="--请选择--"
                >--请选择--</el-option
              >
              <el-option value="跟进中" key="跟进中" label="跟进中"
                >跟进中</el-option
              >
              <el-option value="已成交" key="已成交" label="已成交"
                >已成交</el-option
              >
            </el-select>
          </div>
        </div>
        <div style="display: flex">
          <div>来源</div>
          <div style="width: 45%;">
            <el-select
              v-model="store.mong.aoolydt"
              placeholder="Select"
              size="large"
              style="width: 240px"
            >
              <el-option value="--请选择--" key="--请选择--" label="--请选择--"
                >--请选择--</el-option
              >
              <el-option key="主动来访" label="主动来访" value="网上练习"
                >主动来访</el-option
              >
              <el-option key="网上练习" label="网上练习" value="网上练习"
                >网上练习</el-option
              >
              <el-option key="电话销售" label="电话销售" value="电话销售"
                >电话销售</el-option
              >
            </el-select>
          </div>
          <div>金额</div>
          <div>
            <input v-modedl="store.mong.money" style="background: #f1f1f1" type="text" />
          </div>
        </div>
        <div style="display: flex">
          <div style="height: 100px">说明</div>
          <div style="height: 100px">
            <textarea name="" v-model="store.mong.explain" id="" cols="73" rows="2"></textarea>
          </div>
        </div>
        <div style="display: flex">
          <div style="height: 100px">相关文件</div>
          <div style="height: 100px">
            <textarea name="" id="" cols="73" rows="2"></textarea>
          </div>
        </div>
        <div style="display: flex;width: 100%;">
          <div>操作人</div>
          <div style="width: 45%;">
            <input v-model="store.mong.createname" style="background: #f1f1f1" type="text" />
          </div>
          <div>操作人部门</div>
          <div>
            <input v-model="store.mong.base_deptname" style="background: #f1f1f1" type="text" />
          </div>
        </div>
      </div>

      <template #footer>
        <p class="bottom">
          <el-button @click="updateclose">保存(s)</el-button>
          <el-button @click="add.close()">取消</el-button>
        </p>
      </template>
    </hdialog>
    <hdialog ref="add" :width="`800px`" class="name">
      <h1 class="h1">销售机会</h1>
      <div class="namsexx">
        <div style="display: flex;">
          <div>客户</div>
          <div style="display: flex;margin-top: 10px">
            <input v-model="store.mong.name" style="background: #f1f1f1" type="text" /><el-button
              >选择</el-button
            >
          </div>
          <div>状态</div>
          <div>
            <el-select
              v-model="store.mong.state"
              placeholder="Select"
              size="large"
              style="width: 240px"
            >
              <el-option value="--请选择--" key="--请选择--" label="--请选择--"
                >--请选择--</el-option
              >
              <el-option value="跟进中" key="跟进中" label="跟进中"
                >跟进中</el-option
              >
              <el-option value="已成交" key="已成交" label="已成交"
                >已成交</el-option
              >
            </el-select>
          </div>
        </div>
        <div style="display: flex">
          <div>来源</div>
          <div style="width: 45%;">
            <el-select
              v-model="store.mong.aoolydt"
              placeholder="Select"
              size="large"
              style="width: 240px"
            >
              <el-option value="--请选择--" key="--请选择--" label="--请选择--"
                >--请选择--</el-option
              >
              <el-option key="主动来访" label="主动来访" value="网上练习"
                >主动来访</el-option
              >
              <el-option key="网上练习" label="网上练习" value="网上练习"
                >网上练习</el-option
              >
              <el-option key="电话销售" label="电话销售" value="电话销售"
                >电话销售</el-option
              >
            </el-select>
          </div>
          <div>金额</div>
          <div>
            <input v-modedl="store.mong.money" style="background: #f1f1f1" type="text" />
          </div>
        </div>
        <div style="display: flex">
          <div style="height: 100px">说明</div>
          <div style="height: 100px">
            <textarea name="" v-model="store.mong.explain" id="" cols="73" rows="2"></textarea>
          </div>
        </div>
        <div style="display: flex">
          <div style="height: 100px">相关文件</div>
          <div style="height: 100px">
            <textarea name="" id="" cols="73" rows="2"></textarea>
          </div>
        </div>
        <div style="display: flex;width: 100%;">
          <div>操作人</div>
          <div style="width: 45%;">
            <input v-model="store.mong.createname" style="background: #f1f1f1" type="text" />
          </div>
          <div>操作人部门</div>
          <div>
            <input v-model="store.mong.base_deptname" style="background: #f1f1f1" type="text" />
          </div>
        </div>
      </div>

      <template #footer>
        <p class="bottom">
          <el-button @click="addclose">保存(s)</el-button>
          <el-button @click="add.close()">取消</el-button>
        </p>
      </template>
    </hdialog>
    <hdialog v-model="shows" :width="`800px`" class="name">
      <h1 class="h1">客户管理</h1>
      <div class="namsex">
        <div style="display: flex;width: 100%">
          <div style="width: 10%">申请人</div>
          <div style="width: 90%">{{ store.mong.base_name }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">申请人部门</div>
          <div style="width: 90%">{{ store.mong.base_deptname }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">单号</div>
          <div style="width: 90%">{{ store.mong.sericnum }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">客户</div>
          <div style="width: 90%">{{ store.mong.sustid }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">客户名称</div>
          <div style="width: 90%">{{ store.mong.name }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">所属人</div>
          <div style="width: 90%">{{ store.mong.aoolydt }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">金额</div>
          <div style="width: 90%">{{ store.mong.money }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">日期</div>
          <div style="width: 90%">{{ store.mong.adddt }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">创建人</div>
          <div style="width: 90%">{{ store.mong.createname }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">销售人</div>
          <div style="width: 90%">{{ store.mong.optname }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">状态</div>
          <div style="width: 90%">{{ store.mong.state }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">备注</div>
          <div style="width: 90%">{{ store.mong.explain }}</div>
        </div>

        <div style="display: flex">
          <div style="width: 10%">操作列</div>
          <div style="width: 90%">{{ store.mong.lie }}</div>
        </div>
      </div>
    </hdialog>
    <!-- 自定义列表 -->
    <hdialog v-model="sel">
      <div class="divs">
        <div v-for="item in list" :key="item.id">
          <el-checkbox v-model="item.flag" size="large">{{
            item.name
          }}</el-checkbox>
        </div>
      </div>
      <template #footer>
        <div class="bottom">
          <el-button @click="seleed">保存(s)</el-button>
          <el-button @click="">取消</el-button>
        </div>
      </template>
    </hdialog>

    <div class="flex">
      <div>
        <el-button @click="adds" class="m-2" type="primary"
          ><el-icon :size="20"><Plus /></el-icon>新增</el-button
        >
        <el-input
          class="m-2"
          style="width: 150px"
          placeholder="关键字"
          v-model="inp"
        ></el-input>
        <el-button @click="handeltable">搜索</el-button>
        <el-button style="width: 20px; padding: 0px; margin-right: 30px">
          <el-dropdown>
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>高级搜索</el-dropdown-item>
                <el-dropdown-item @click="()=>{
                  sel=true
                }"
                  >自定义列显示</el-dropdown-item
                >
                <el-dropdown-item>打印</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button>
        <el-button
          v-for="item in bntlist"
          @click="itemid(item.id)"
          :key="item.id"
          :class="{ on: item.id == oneid }"
          >{{ item.name }}</el-button
        >
      </div>
      <div>
        <el-button>重新计算</el-button>
        <el-button>
          <el-dropdown>
            <span class="el-dropdown-link">
              操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>导出全部</el-dropdown-item>
                <el-dropdown-item>导出当前页</el-dropdown-item>
                <el-dropdown-item>订阅此列表</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button>
      </div>
    </div>
    <el-table
      ref="singleTableRef"
      empty="没有数据"
      width="100%"
      
      :border="true"
      :data="filterTable"
      highlight-current-row
      style="width: 100%"
    >
      <!-- 添加其他列 -->
      <el-table-column type="index" width="50" />
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column
        v-for="item in newlist"
        :key="item.id"
        :prop="item.type"
        :label="item.name"
      />
      <!-- 添加操作列 -->
      <el-table-column>
        <template #default="{ row }">
          <el-dropdown>
            <span class="el-dropdown-link">
              操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="show(row)">详情</el-dropdown-item>
                <el-dropdown-item @click="showlist(row)"
                  >详情(新窗口)</el-dropdown-item
                >
                <el-dropdown-item @click="show(row)"
                  >添加跟进记录</el-dropdown-item
                >
                <el-dropdown-item>评论</el-dropdown-item>
                <el-dropdown-item @click="show(row)"
                  >添加提醒设置</el-dropdown-item
                >
                <el-dropdown-item @click="edit(row)">编辑</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.on {
  background-color: transparent;
  display: inline-block;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-color: #4e4f50;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
}

.el-button {
  margin: 0;
  color: black;
}
.el-button:focus {
  color: black;
}
.el-button:hover {
  background: none;
  border-color: #4e4f50;
  color: black;
}
.divs {
  height: 200px;
  overflow: auto;
}
.mar {
  margin-right: 10px;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.bottom {
  margin-top: 20px;
  width: 100%;
  height: 40px;
  background: rgb(238, 238, 238);
}
.name div {
  border: 1px solid black;
}
.namsex {
  width: 600px;
  margin: 0 auto;
}
.namsexx {
  text-align: center;
  width: 665px;
  margin: 0 auto;
}
.namsexx div {
  
  min-width: 100px;
  line-height: 50px;
}
.namsex div {
  min-width: 100px;
  line-height: 50px;
}
.namsexx input {
  height: 30px;
}
.h1 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
</style>